<template>
	<view class="login">
		<view class="phone">
			<label>手机号</label>
			<input type="text"
				v-model="phoneNum"
				placeholder="请输入手机号" />
		</view>
		<view class="verificationCode">
			<label>验证码</label>
			<input type="text"
				v-model="reqCode"
				placeholder="请输入验证码" />
			<button class="btn"
				:disabled="countDownState"
				@click="
				btnCode"><text v-show="countDown !== -1">{{countDown}}</text>&nbsp;发送验证码</button>
			<uni-popup ref="codeBtn"
				type="message">
				<uni-popup-message :type="codeState"
					:message="msg"
					:duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
		<view class="loginBtn">
			<button @click="loginBtn">立即登录</button>
			<uni-popup ref="popuploginBtn"
				type="message">
				<uni-popup-message :type="codeState"
					:message="msg"
					:duration="2000"></uni-popup-message>
			</uni-popup>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps
	} from 'vue'
	import http from '../../../utils/http.js'
	const host = http.BASE_URL
	let countDown = ref(-1)
	let countDownState = ref(false)
	let phoneNum = ref('')
	let reqCode = ref('')

	let msg = ref('')
	let codeState = ref('')

	let popuploginBtn = ref(null)
	let codeBtn = ref(null)



	const props = defineProps({
		nickName: String
	})
	/* 
	   // defineProps ⽤来接收⽗组件传来的值props。
	  // defineEmits ⽤来声明触发的事件表。
	  // useContext ⽤来获取组件上下context
	*/
	// console.log(props);

	//获取验证码
	let btnCode = () => {
		console.log(phoneNum.value);
		countDown.value = 60
		countDown.value !== 0 ? countDownState.value = true : ''
		let reciprocalTime = setInterval(() => {
			countDown.value--
			countDown.value <= -1 ? clearInterval(reciprocalTime) : ''
			countDown.value === -1 ? countDownState.value = false : ''
		}, 1000)
		http.http({
			url: '/juben/getCode',
			method: 'post',
			data: {
				openID: phoneNum.value,
				nickName: props.nickName
			}
		}).then((res) => {
			console.log(res);
			if (res.data.code == 200) {
				msg.value = '验证码已发送'
				codeState.value = 'success'
				codeBtn.value.open()
			} else {
				msg.value = res.data.msg
				codeState.value = 'warn'
				codeBtn.value.open()
			}

		})
	}
	//登录
	let loginBtn = () => {
		console.log(reqCode.value);

		http.http({
			url: '/juben/login',
			method: 'post',
			data: {
				reqCode: reqCode.value
			}
		}).then((res) => {
			console.log(res);
			if (res.data.code == 200) {
				uni.setStorageSync('openID', phoneNum.value)
				uni.switchTab({
					url: '/pages/index/index',
				});
				msg.value = '验证码已发送'
				codeState.value = 'success'
				popuploginBtn.value.open()
			} else {
				popuploginBtn.value.open()
				msg.value = res.data.msg
				codeState.value = 'warn'
			}

		})
	}
</script>

<style lang="scss">
	.login {
		padding-top: 50rpx;

		.phone,
		.verificationCode {
			// height: 80rpx;
			border: 1px solid #ccc;
			margin-bottom: 40rpx;
			display: flex;

			label {
				text-align: center;
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				color: #989898;
			}

			input {
				height: 80rpx;
				line-height: 80rpx;
			}
		}

		.phone {
			input {
				width: 550rpx;
			}
		}

		.verificationCode {

			input {
				width: 350rpx;
			}

			.btn {
				margin: 0;
				padding: 0;
				font-size: 28rpx;
				width: 200rpx;
				color: #fff;
				background-color: #00d5bf;
			}
		}

		.loginBtn {
			button {
				background-color: #00d5bf;
				color: #fff;
			}
		}

		uni-popup-message {
			text-align: center;
		}
	}
</style>
